//directive.js文件

import Vue from "vue";

// sonar扫描
function getDragDomLeft(binding, l, styL) {
  let left = `${l + styL}px`;
  if (binding.value === "windowborder") {
    const outpadding = 20; // 右、下场合时的边距。右下场合时不留边距一样会导致无法操作
    if (l + styL < -180) {
      left = "-180px";
    }
    if (l + styL > window.innerWidth - outpadding) {
      left = `${window.innerWidth - outpadding}px`;
    }
  }
  return left;
}
// sonar扫描
function getDragDomTop(binding, t, styT) {
  let top = `${t + styT}px`;
  if (binding.value === "windowborder") {
    const outpadding = 20; // 右、下场合时的边距。右下场合时不留边距一样会导致无法操作
    if (t + styT < 0) {
      top = 0;
    }
    if (t + styT > window.innerHeight - outpadding) {
      top = `${window.innerHeight - outpadding}px`;
    }
  }
  return top;
}

// v-dialogDrag: 弹窗拖拽
Vue.directive("dialogDrag", {
  componentUpdated(el, binding, vnode, oldVnode) {
    console.log(oldVnode);
    const dialogHeaderEl = el.querySelector(".el-dialog__header");
    const dragDom = el.querySelector(".el-dialog");
    dialogHeaderEl.style.cursor = "move";

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    if (dialogHeaderEl.onmousedown) {
      // 如果绑过这个事件，我认为已经操作过了，就不要再次处理
      return;
    }
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      // 获取到的值带px 正则匹配替换
      let styL, styT;

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes("%")) {
        styL = +document.body.clientWidth * (+sty.left.replace(/%/g, "") / 100);
        styT = +document.body.clientHeight * (+sty.top.replace(/%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/px/g, "");
        styT = +sty.top.replace(/px/g, "");
      }

      const moveHandler = function (event) {
        // 通过事件委托，计算移动的距离
        const l = event.clientX - disX;
        const t = event.clientY - disY;

        // 移动当前元素
        // dragDom.style.left = `${l + styL}px`;
        // dragDom.style.top = `${t + styT}px`;

        dragDom.style.left = getDragDomLeft(binding, l, styL);
        dragDom.style.top = getDragDomTop(binding, t, styT);

        // 如果配置为windowborder，那么就限制拖动范围
        // if (binding.value === "windowborder") {
        //   const outpadding = 20; // 右、下场合时的边距。右下场合时不留边距一样会导致无法操作
        //   if (l + styL < -180) {
        //     dragDom.style.left = "-180px";
        //   }
        //   if (l + styL > window.innerWidth - outpadding) {
        //     dragDom.style.left = `${window.innerWidth - outpadding}px`;
        //   }
        //   if (t + styT < 0) {
        //     dragDom.style.top = 0;
        //   }
        //   if (t + styT > window.innerHeight - outpadding) {
        //     dragDom.style.top = `${window.innerHeight - outpadding}px`;
        //   }
        // }
        // binding.value({x:e.pageX,y:e.pageY})
      };

      const upHandler = function () {
        document.removeEventListener("mousemove", moveHandler);
        document.removeEventListener("mouseup", upHandler);
      };

      document.addEventListener("mousemove", moveHandler);
      document.addEventListener("mouseup", upHandler);
    };
  },
});

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive("dialogDragWidth", {
  bind(el, binding, vnode, oldVnode) {
    console.log(oldVnode);
    const dragDom = binding.value.$el.querySelector(".el-dialog");

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft;

      document.onmousemove = function (event) {
        event.preventDefault(); // 移动时禁用默认事件

        // 通过事件委托，计算移动的距离
        const l = event.clientX - disX;
        dragDom.style.width = `${l}px`;
      };

      document.onmouseup = function (event) {
        console.log(event);
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});

Vue.directive("divDrag", {
  bind(el, binding, vnode, oldVnode) {
    console.log(oldVnode);
    let dialogHeaderEl = el.querySelector(".tool-header");
    let dragDom = el;
    let offsetLeft = 0;
    let offsetTop = 0;
    //出现没有header的时候直接用div
    if (dialogHeaderEl) {
      dialogHeaderEl.oncopy = function (e) {
        console.log(e);
        return false;
      };
      dialogHeaderEl.style.cursor = "pointer";
      offsetLeft = dialogHeaderEl.offsetLeft;
      offsetTop = dialogHeaderEl.offsetTop;
    } else {
      dialogHeaderEl = el;
      el.oncopy = function (e) {
        console.log(e);
        return false;
      };
      el.style.cursor = "pointer";
    }

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    let sty =
      dragDom.currentStyle ||
      document.defaultView.getComputedStyle(dragDom, null);

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      let disX = e.clientX - offsetLeft;
      let disY = e.clientY - offsetTop;

      // 获取到的值带px 正则匹配替换
      let styL, styT;

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes("%")) {
        styL = +document.body.clientWidth * (+sty.left.replace(/%/g, "") / 100);
        styT = +document.body.clientHeight * (+sty.top.replace(/%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/px/g, "");
        styT = +sty.top.replace(/px/g, "");
      }

      document.onmousemove = function (event) {
        // 通过事件委托，计算移动的距离
        let l = event.clientX - disX;
        let t = event.clientY - disY;

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
        /*binding.value.that.resize({
          left: l + styL,
          top: t + styT
        })*/
      };

      document.onmouseup = function (event) {
        console.log(event);
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});
